<style lang="scss" scoped>
  @import '../../styles/common/loading.less';
  .container{
    border: none !important;
    margin-top: 4px;
  }
  .el-col-offset-1 {
    margin-left: 0%;
  }
  .button_a {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);

  }
  .col_a {
    margin-left: 2%;
  }
  .el-card {
    height: 200px;
  }

  .el-button--primary {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);
  }
</style>
<template>
    <div>
        <div class="container">
            <el-form ref="formInline" :model="formInline" class="select-submit-form">
                <el-row type="flex">
                    <el-col :span="8">
                        <el-form-item label="结算单号" prop="businessNo">
                            <el-input v-model="formInline.businessNo" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="医疗机构">
                            <!-- <el-select  v-model="formInline.hospCode" placeholder="" >
                                <el-option label="请选择" value=""></el-option>
                                <el-option v-for="item in hospitalList" :key="item.hospitalCode" :label="item.hospitalName" :value="item.hospitalCode"> </el-option>
                            </el-select> -->
                            <el-input  style="margin-top: 5px" v-model="formInline.hospitalName" placeholder="" disabled>
                                <el-button slot="append" @click="hospitalDialogVisible = true" icon="el-icon-search"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="任务状态" >
                            <el-select v-model="formInline.taskState" style="width: 100%">
                                <el-option label="请选择" value="09"></el-option>
                                <el-option label="待处理" value="01"></el-option>
                                <el-option label="已处理" value="03"></el-option>
                                <el-option label="已退回" value="04"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-row type="flex">
                    <el-col :span="8">
                        <el-form-item label="开始日期" prop="startDate">
                            <el-date-picker
                                v-model="formInline.startDate"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="终止日期" prop="endDate">
                            <el-date-picker
                                v-model="formInline.endDate"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <el-row>
                  <el-col :span="24">
                    <div class="select-btn-group">
                      <el-button type="primary" size="medium"  @click="handleSearch">查询</el-button>
                      <el-button type="primary" size="medium" @click="handleReset('formInline')">重置</el-button>
                    </div>
                  </el-col>
                </el-row>
            </el-form>
            <!-- <template>
            <div>
                <el-divider></el-divider>
            </div>
            </template> -->
            <el-table
                :data="tableData"

                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                style="margin: 30px 0;border: 1px solid #d6d9d8;"
                v-loading="loading"
                element-loading-text="Loading....."
            >
                <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
                <el-table-column prop="settleNo" label="结算单号" width="165" align="center">
                    <template  slot-scope="scope">
                        <a href="#" style="color: #409EFF" @click="toTaskDetailPage(scope.row)">{{scope.row.settleNo}}</a>
                        <!-- <a href="#" style="color: #ff8a00" >{{scope.row.businessNo}}</a> -->
                         <!-- <router-link 
                        :to="{
                            name: 'settlementTaskAuditDetail', 
                            params: { 
                                taskId: scope.row.taskId,
                                settleNo: scope.row.settleNo,
                                taskState: scope.row.taskState,
                            }
                        }">
                            <a href="#" style="color: #409EFF" >{{scope.row.settleNo}}</a>
                        </router-link> -->
                    </template>
                </el-table-column>
                <el-table-column prop="settleNum" label="结算笔数" align="center"></el-table-column>
                <el-table-column prop="taskState" label="状态" align="center" :formatter="formatTaskState"></el-table-column>
                <el-table-column prop="medicalFeeAmount" label="医疗费用总额" align="center"></el-table-column>
                <!-- <el-table-column prop="deductionAmount" label="扣款金额" align="center"></el-table-column>
                <el-table-column prop="supplementAmount" label="应补金额" align="center"></el-table-column> -->
                <el-table-column prop="actualPaymentAmount" label="实际支付金额" align="center"></el-table-column>
                <el-table-column prop="handleComrName" label="处理人机构" width="150" align="center"></el-table-column>
                <el-table-column prop="handlerName" label="处理人" align="center"></el-table-column>
                <el-table-column prop="flowInTime" label="创建时间" width="150" align="center"></el-table-column>
                <el-table-column prop="flowOutTime" label="完成时间" width="150" align="center"></el-table-column>
            </el-table>
            <div class="pagination">
                <div v-show=" pagination.totalPage>0" class="index_page">
                <el-pagination :current-page="pagination.currentPage" :page-size="pagination.rowsNumber"
                                :page-sizes="[10, 25, 50, 100]"
                                :total="pagination.totalPage" background layout="prev, pager, next,sizes,total,jumper"
                                @size-change="handleSizeChange" @current-change="queryFun">
                </el-pagination>
                </div>
            </div>

             <!-- 医疗机构选择弹框 -->
            <el-dialog
                title="医疗机构信息"
                :visible.sync="hospitalDialogVisible"
                width="60%"
                center>
                <template>
                    <div class="container">
                        <el-form :model="prpLHospCompany" ref="prpLHospCompany">
                            <el-row type="flex">
                                <el-col :span="12">
                                    <el-form-item label="医疗机构名称" prop="hospName">
                                        <el-input placeholder="" v-model="prpLHospCompany.hospName"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="医疗机构编码" prop="hospCode">
                                        <el-input placeholder=""  v-model="prpLHospCompany.hospCode"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                            <el-col :span="24">
                                <div class="select-btn-group">
                                    <el-button type="primary" size="medium"  @click="queryHospList">查询</el-button>
                                    <el-button type="primary" size="medium" @click="resetForm('prplPayeeList')">重置</el-button>
                                </div>
                            </el-col>
                            </el-row>
                        </el-form>
                        <el-table
                        :data="hospitalList"
                        class="table"
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                        style="margin-top: 10px"
                        >
                            <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
                            <el-table-column prop="hospName" label="医疗机构名称" align="center">
                                <template  slot-scope="scope">
                                    <a href="#" style="color: #409EFF" @click="choseHosp(scope.row)">{{scope.row.hospName}}</a>
                                </template> 
                            </el-table-column>
                            <el-table-column prop="hospCode" label="医疗机构编码" align="center">
                                <template  slot-scope="scope">
                                    <a href="#" style="color: #409EFF" @click="choseHosp(scope.row)">{{scope.row.hospCode}}</a>
                                </template>     
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination :current-page="hosppagination.currentPage" :page-size="hosppagination.rowsNumber"
                                            :total="hosppagination.totalPage" background layout="prev, pager, next,total,jumper"
                                            @current-change="hospQueryFun">
                            </el-pagination>
                        </div>
                    </div>
                </template>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="hospitalDialogVisible = false">关闭</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import{ queryProcessEngineList, taskCheck, queryHospCompanyList }from '@/api/baseDate';
import moment, { relativeTimeRounding } from 'moment';
import Cookies from 'js-cookie';
export default {
    name: 'settlementTaskAudit',
    data() {
        return {
            loading: false,
            pagination: {
                currentPage: 1, // 当前页
                rowsNumber: 10, // 每页条数
                totalPage: 0 // 总条数
            },
            hospitalDialogVisible: false,
            prpLHospCompany: {}, // 医疗机构对象
            hospitalList:[], // 医疗机构列表
            hosppagination:{
                currentPage: 1, // 当前页
                rowsNumber: 5, // 每页条数
                totalPage: 0 // 总条数
            },
            formInline: {
                startDate:'',
                endDate:'',
                hospCode:'',
                hospitalName:'',
            },
            tableData:[],

        }
    },
    created() {
        this.querySettleAuditTaskList();
    },
    methods: {
        handleSizeChange(pageSize){ // 改变当前页条数事件
            this.pagination.rowsNumber=pageSize
            this.querySettleAuditTaskList();
        },
        queryFun(pageNum){ // 改变当前页事件
            this.pagination.currentPage=pageNum;
            this.querySettleAuditTaskList();
        },
        // 查询医疗机构
        queryHospList(){
            let param = {
                ...this.prpLHospCompany,
                pageNum: this.hosppagination.currentPage,
                pageSize: this.hosppagination.rowsNumber
            }
            queryHospCompanyList(param)
                .then(res => {
                    this.hospitalList = res.data.list;
                    this.hosppagination.totalPage = res.data.total;
                })
        },
        // 改变医疗机构
        hospQueryFun(pageNum){ 
            this.hosppagination.currentPage = pageNum;
            this.queryHospList();
        },
        // 选择医疗机构
        choseHosp(row){
            this.formInline.hospCode = row.hospCode;
            this.formInline.hospitalName = row.hospName;
            this.hospitalDialogVisible = false;
        },
        // 触发搜索按钮
        handleSearch() {
            this.querySettleAuditTaskList();
        },
        handleReset(formName){ // 重置
            this.$refs[formName].resetFields();
        },
        querySettleAuditTaskList(){
            let param = {
                ...this.formInline,
                taskType:'settle_audit',
                pageNum:this.pagination.currentPage,
                pageSize:this.pagination.rowsNumber,
                handleComrCode : Cookies.get("makeCom"),
                handlerCode : Cookies.get("userCode")
            }
            param.startDate = param.startDate ? moment(param.startDate).format('YYYY-MM-DD HH:mm:ss') : '';
            param.endDate = param.endDate ? moment(param.endDate).format('YYYY-MM-DD HH:mm:ss') : '';
            // 禁止重复点击
            if(this.loading){
                return;
            }
            this.loading = true;
            queryProcessEngineList(param).then((res)=> this.handleTaskListResponse(res));
        },
        handleTaskListResponse(res){
            this.loading = false;
            if(res){
                if(res.data.resultCode){
                    if(res.data.resultCode != '0000'){ 
                        // 返回失败
                        this.$message.error(res.data.resultMsg);

                    }else{
                        // 返回成功
                        this.tableData = res.data.list;
                        this.pagination.totalPage = res.data.total;                 
                    }
                }
            }else{
                this.$message.error('系统异常'); 
            }
        },
        // 跳转至结算审核详情页面
        toTaskDetailPage(row){
            if(row.taskState === '01'){
                this.checkTask(row);
            }else{
                this.toDetailPage(row);
            }  

        },
        // 跳转详情
        toDetailPage(row){
            const datas = {
                taskId: row.taskId,
                settleNo: row.settleNo,
                taskState: row.taskState,
            };
            this.$router.push({
                name: 'settlementTaskAuditDetail',
                params: datas,
            });
        },
        // 占位校验
        checkTask(row){
            let checkDatas = {
                processId: row.processId,
                handleComrCode: Cookies.get("makeCom"),
                handleComrName: Cookies.get("cMakeCom"),      
                handlerCode: Cookies.get("userCode"),
                handlerName: Cookies.get("userName"),
                reqFlag: "check"
            }
            taskCheck(checkDatas).then(res => {
                if(res){
                    if(res.data.resultCode != '0000'){
                        this.$alert(res.data.resultMsg,'提示', {
                            confirmButtonText: '确定'
                        });
                    }else{
                        this.toDetailPage(row);
                    }
                }else{
                    this.$message.error('系统异常');
                }
            })

        }
    }
}
</script>
